<script>
import app from "../../../../config/app"

export default {
  name: "backgroundComponents",
  data() {
    return {
      IMG_URL: app.IMG_URL,
      height: 0
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  mounted() {
    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select('.backgroundComponents_content').boundingClientRect(res => {
        this.height = res.height
      }).exec()
    })
  },
}
</script>

<template>
  <view class="backgroundComponents">
    <view class="backgroundComponents_bg column" :style="{
      height:`${height}px`
    }">
      <image class="backgroundComponents_bg_image" style="height: 67rpx"
             :src="`${IMG_URL}fhm_detail_content_bg_top.png`"
             mode="scaleToFill"></image>
      <image class="backgroundComponents_bg_image" style="flex: 1"
             :src="`${IMG_URL}fhm_detail_content_bg_center.png`"
             mode="scaleToFill"></image>
      <image class="backgroundComponents_bg_image" style="height: 65rpx"
             :src="`${IMG_URL}fhm_detail_content_bg_bottom.png`"
             mode="scaleToFill"></image>
    </view>
    <view class="backgroundComponents_floatingWindowHead allRowCenter" v-if="!!title">
      <text>{{ title }}</text>
    </view>
    <view class="backgroundComponents_content allColumnCenter">
      <slot name="content"></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
.backgroundComponents {
  width: 662rpx;
  position: relative;

  .backgroundComponents_bg {
    width: 100%;
    height: 100%;

    .backgroundComponents_bg_image {
      width: 100%;
    }
  }

  .backgroundComponents_floatingWindowHead {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 233rpx;
    height: 85rpx;
    background: url($genealogyBackgroundMap +"fhm_detail_title_bg.png") no-repeat;
    background-size: 233rpx 100%;
  }

  .backgroundComponents_content {
    width: 662rpx;
    position: absolute;
    top: 0;
    left: 0;
    padding: 67rpx 0 65rpx 0;
  }
}
</style>